<template>
	<view>
		<view class="title">
			<image class="image1" src="../../../static/users/over.png" mode=""></image>
			<view class="over">
				待付款
			</view>
			<view class="ready">
				已完成此次订单
			</view>
		</view>


		<view class="msg">
			收货信息
		</view>

		<view class="permsg" @click="haveaddress">
			<view class="one_msg">
				<image class="image_msg" src="../../../static/users/person.png" mode=""></image>
				<text>李大宝</text>
			</view>

			<view class="one_msg">
				<image class="image_msg" src="../../../static/users/c-phone.png" mode=""></image>
				<text>15282094560</text>
			</view>

			<view class="one_msg">
				<image class="image_msg" src="../../../static/users/position.png" mode=""></image>
				<text>成都市武侯区锦悦西路环球中心</text>
			</view>

			<image src="../../../static/users/right.png" mode=""></image>
		</view>




		<view class="order" v-for="(res, index) in orderList" :key="res.id" @click="gopaid">
			<view class="top">
				<view class="left">
					<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
					<view class="store">{{ res.store }}</view>
					<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
				</view>
				<view class="right">待付款</view>
			</view>
			<view class="item" v-for="(item, index) in res.goodsList" :key="index">
				<view class="left">
					<image :src="item.goodsUrl" mode="aspectFill"></image>
				</view>
				<view class="content">
					<view class="title u-line-2">{{ item.title }}</view>
					<view class="type">{{ item.type }}</view>
					<view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
				</view>
				<view class="right">
					<view class="price">
						￥
						<text class="decimal">555.02</text>
					</view>
					<view class="number">x{{ item.number }}</view>
				</view>
			</view>
			<view class="total">
				共2件商品 合计:
				<text class="total-price">
					￥323.00
					<text class="decimal">4445.00</text>
				</text>
			</view>
			<view class="bottoms">
				<!-- <view class="more">
					<u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
				</view> -->
				<!-- 		<view class="logistics btn">查看物流</view>
				<view class="exchange btn">卖了换钱</view>
				<view class="evaluate btn">评价</view> -->
			</view>
		</view>


		<view class="message">
			<view class="msg_zhu" v-for="(item,index) in menu">
				<text class="zi1">{{item.name}}</text>
				<text class="zi2">1{{item.content}}</text>
			</view>
		</view>


		<!-- <view class="ping">
			<view class="cont">
				商品评价：这是一个商品评价，这是一个商品评价，这是...
			</view>
			
			<view class="image_ping" >
				<image v-for="(item,index) in 4" src="../../../static/users/overping.png" mode=""></image>
			</view>
		</view> -->
        <view class="gongneng">
        	<view class="left">
        		取消订单
        	</view>
			
			<view class="right">
				付款
			</view>
			
			<view class="xian">
				
			</view>
        </view>
		<view class="bottom"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [{
					id: 3,
					store: '三星旗舰店',
					goodsList: [{
							goodsUrl: '//img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg',
							title: '三星（SAMSUNG）京品家电 UA65RUF70AJXXZ 65英寸4K超高清 HDR 京东微联 智能语音 教育资源液晶电视机',
							type: '4K，广色域',
							deliveryTime: '保质5年',
							price: '1998',
							number: 3
						},
						{
							goodsUrl: '//img14.360buyimg.com/n7/jfs/t6007/205/4099529191/294869/ae4e6d4f/595dcf19Ndce3227d.jpg!q90.jpg',
							title: '美的(Midea)639升 对开门冰箱 19分钟急速净味 一级能效冷藏双开门杀菌智能家用双变频节能 BCD-639WKPZM(E)',
							type: '容量大，速冻',
							deliveryTime: '保质5年',
							price: '2354',
							number: 1
						}
					]
				}],
				menu: [{
					name: "订单编号",
					content: "51245748541212"
				}, {
					name: "店铺优惠",
					content: "满45减20"
				}, {
					name: "订单备注",
					content: "无"
				}]
			}
		},
		methods: {
			haveaddress() {
				uni.navigateTo({
					url: "../../showaddress/showaddress"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F4FA;
	}

	.title {
		margin: 28rpx auto;
		width: 690rpx;
		height: 220rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		position: relative;

		.image1 {
			position: absolute;
			top: 54rpx;
			left: 240rpx;
			width: 91rpx;
			height: 91rpx;
		}

		.over {
			position: absolute;
			top: 67rpx;
			right: 260rpx;
			width: 99rpx;
			height: 31rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #F9A31F;
		}

		.ready {
			position: absolute;
			left: 262rpx;
			bottom: 59rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
		}
	}

	.msg {
		margin: 38rpx 0 11rpx 42rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.permsg {
		margin-left: 30rpx;
		width: 690rpx;
		height: 250rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		border: 1px solid #fff;
		position: relative;

		image {
			position: absolute;
			right: 30rpx;
			top: 116rpx;
			width: 10rpx;
			height: 18rpx;
		}

		.one_msg {
			margin: 40rpx 0 0 40rpx;
			width: 650rpx;
			height: 36rpx;
			position: relative;

			.image_msg {
				position: absolute;
				left: 0;
				top: 0;
				width: 34rpx;
				height: 36rpx;
			}

			text {
				margin-left: 65rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 36rpx;
			}
		}
	}


	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				color: $u-type-warning-dark;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 28rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					line-height: 50rpx;
					border-radius: 0;
				}

				.u-line-2 {
					width: 336rpx;
					height: 103rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottoms {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;

			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
			}

			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}

	.message {
		margin: 0 auto;
		padding: 10rpx 39rpx 0 41rpx;
		width: 710rpx;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 30rpx;

		.msg_zhu {
			margin: 30rpx 0 0 0;
			width: 630rpx;
			height: 30rpx;
			position: relative;

			.zi1 {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #010101;
				line-height: 30rpx;
			}

			.zi2 {
				display: block;
				position: absolute;
				right: 0rpx;
				top: -10rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #010101;
				line-height: 40px;
			}
		}
	}


	.ping {
		padding: 40rpx;
		margin: 21rpx auto 0rpx auto;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		.cont{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}
		.image_ping{
			margin-top: 36rpx;
			image{
				margin-right: 30rpx;
				width: 160rpx;
				height: 120rpx;
			}
		}
	}
	.gongneng{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 24rpx 0px rgba(0, 0, 0, 0.12);
		border-radius: 40rpx 40rpx 0px 0px;
		.left{
			position: absolute;
			left: 300rpx;
			top: 15rpx;
			text-align: center;
			width: 190rpx;
			height: 68rpx;
			border: 2rpx solid #000000;
			border-radius: 34rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #181818;
			line-height: 68rpx;
		}
		.right{
			position: absolute;
			right: 30rpx;
			top: 15rpx;
			text-align: center;
			width: 190rpx;
			height: 68rpx;
			background: #181818;
			border-radius: 34rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 68rpx;
		}
		.xian{
			position: absolute;
			bottom: 18rpx;
			left: 241rpx;
			width: 268rpx;
			height: 10rpx;
			background-color: #000;
		}
	}
	.bottom{
		width: 750rpx;
		height: 300rpx;
	}
</style>
